<template>
    <div class="cameraMes">
        <ul>
            <li v-for="(item,index) in  $store.state.camera.cameraCollection">
                cameraId: {{item.asset.extras[0].Id}}
                <img class="view" src="~assets/images/eyeset.png" @click="showPosition(index)">
                <button class="delet" @click="delCamera(index)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: '',
        props: {
            viewer: undefined
        },
        data() {
            return {

            }
        },
        methods: {
            // 点击跳转到指定相机
            showPosition(index) {
                var cameraPosition = this.$store.state.camera.cameraCollection[index].asset.extras[0].Position;
                this.viewer.camera.setView({
                    destination: {
                        x: cameraPosition.x - 5,
                        y: cameraPosition.y + 20,
                        z: cameraPosition.z
                    },
                    orientation: {
                        heading: 0.37956290736570253,
                        pitch: -0.8228171362975121,
                        roll: 0.0017158205034117913
                    }
                })
            },

            // 删除相机
            delCamera(index) {
                this.$store.commit('delCamera', index)
            }
        },
        components: {

        }
    }
</script>

<style scpoed>
    @import '~assets/css/Cesium/camera/cameraMessage.css';
</style>